<template>
    <div class="">
        <el-form inline="true">
          <el-form-item>
             <el-input placeholder="姓名" class="input" v-model="doctorForm.name" clearable></el-input>
          </el-form-item>

          <el-form-item>
           <el-select placeholder="科室" class="input" v-model="doctorForm.deptId" clearable>
               <el-option v-for="item in allDept" :key="item.id" :value="item.id" :label="item.name"></el-option>
           </el-select>
          </el-form-item>

          <el-form-item>
            <el-select placeholder="学历" class="input" v-model="doctorForm.degree" clearable>
              <el-option value="博士">博士</el-option>
              <el-option value="研究生">研究生</el-option>
              <el-option value="本科">本科</el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select placeholder="职位" class="input" v-model="doctorForm.job" clearable>
              <el-option value="主任医师">主任医师</el-option>
              <el-option value="副主任医师">副主任医师</el-option>
              <el-option value="副主任医师">主治医师</el-option>
              <el-option value="副主治医师">副主治医师</el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select placeholder="推送级别" class="input" v-model="doctorForm.recommended" clearable>
              <el-option :value="true" label="优先"></el-option>
              <el-option :value="false" label="非优先"></el-option>
            </el-select>

            <el-button type="primary" @click="req" style="margin-left: 20px">查询</el-button>
            <el-button type="primary" @click="open">新增</el-button>
            <el-button type="danger"@click="delChose">批量删除</el-button>
          </el-form-item>
      <div style="float: right">
        <el-radio-group  v-model="doctorForm.status">
          <el-radio-button label="在职" :value="1" />
          <el-radio-button label="离职" :value="2" />
          <el-radio-button label="退休" :value="3" />
        </el-radio-group>
      </div>
        </el-form>
      <!--表单内容区域-->
      <!--table表格区域-->
      <!--data属性 绑定要渲染的数据数组-->
      <!--排序-->
      <!--
          el -table 标签上 添加  :default-sort="{ prop: 'deptName', order: 'descending' }"
          哪个列需要排序 就加上 sortable 属性
      -->

      <!-- expand-row-keys 通过数组的长度来决定展开几行 数组中传入展开行的 key 即可 -->
      <!--  row-key 每行元素的 key 值 一般选择此行表单中的唯一值 id -->
      <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'deptName', order: 'descending' }"
          @selection-change="handleSelectionChange"
          @expand-change="expandChange"
          :expand-row-keys="expands"
          row-key="id"
      >
        <!-- table 表格的每一列 prop指定 这一列展示的字段 以及 此列的标题 lable -->


        <!--展开行-->
          <el-table-column type="expand">
            <template #default="scope">
              <div>
                 <table class="content">
                   <tr>
                     <th width="140">省份证号</th>
                     <td width="320">{{ doctorDetail.pid }}</td>
                     <th width="140">出生日期</th>
                     <td width="320">{{ doctorDetail.birthday }}</td>
                     <td rowspan="3" width="110" align="center">

                       <!-- action 就是文件上传的服务器地址以及接口  -->
                       <!-- headers 设置请求的请求头 我们携带token  -->
                       <!-- data   设置额外携带的参数 即接口需要的   "doctorId": 0 参数 -->
                       <!-- show-file-list   是否显示已上传文件列表	 -->
                       <el-upload
                           :action="action"
                           :headers="{token:token}"
                           :data="{doctorId:scope.row.id}"
                           :show-file-list="false"
                           :on-success="updatePhotoSuccess"
                           :on-error="updatephotoError"
                       >
                        <!-- 加载失败时显示 Picture 图标 即没有图片展示的时候 -->
                       <el-image style="width: 100px; height: 100px" :src="doctorDetail.photo">
                         <template #error>
                           <div class="image-slot">
                             <el-icon><Picture /></el-icon>
                           </div>
                         </template>
                       </el-image>
                       </el-upload>

                     </td>
                   </tr>
                   <tr>
                      <th width="140">医生编号</th>
                     <td width="320">{{ doctorDetail.uuid }}</td>
                     <th width="140">入职日期</th>
                     <td width="320">{{ doctorDetail.hiredate }}</td>
                   </tr>
                   <tr>
                     <th width="140">电子信箱</th>
                     <td width="320">{{ doctorDetail.email }}</td>
                     <th width="140">备注信息</th>
                     <td width="320">{{ doctorDetail.remark }}</td>
                   </tr>
                   <tr>
                     <th >标签描述</th>
                     <td >
                       <el-tag v-for="item in doctorDetail.tag" :key=doctorDetail.uuid>{{ item }}</el-tag>
                     </td>
                     <th >家庭住址</th>
                     <td colspan="2">{{ doctorDetail.address }}</td>
                   </tr>
                   <tr>
                     <th>介绍信息</th>
                     <td colspan="4">{{ doctorDetail.description }}</td>
                   </tr>
                 </table>
              </div>
            </template>
        </el-table-column>

        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="name" label="姓名" width="70" />
        <el-table-column prop="sex" label="性别" width="55" />
        <el-table-column prop="tel" label="电话" />
        <el-table-column prop="job" label="职务" />
        <el-table-column prop="deptName" label="科室" sortable  />
        <el-table-column prop="subName" label="诊室" />
        <el-table-column prop="school" label="毕业大学" />
        <el-table-column prop="degree" label="学历" width="55" />
        <el-table-column prop="status" label="状态" width="55" >
            <template #default="scope">
                <span v-if="scope.row.status==1">在职</span>
                <span v-if="scope.row.status==2">离职</span>
                <span v-if="scope.row.status==3">退休</span>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" >
              <template #default="scope">
                  <span class="table_update" @click="updateOpen(scope)">修改</span>
                  <span @click="deleteOne(scope)">删除</span>
              </template>
        </el-table-column>
      </el-table>

      <!--table表格区域-->

      <!--分页-->
      <!-- layout 组件布局，子组件名用逗号分隔， 指定了子组件-->
      <!-- total 总条数-->
      <!-- page-sizes 每页展示条数的数组 用来切换 -->
      <!-- current-change 每页展示条数 -->

      <el-pagination
          class="doctor_page"
          v-model:current-page="doctorForm.page"
          v-model:page-size="doctorForm.length"
          :page-sizes="[10, 12, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>

      <!-- 分页 -->

      <!-- 这个不知道哪来的 有个传递参数  我我没有好像也没什么问题  在 day08-5视频中8min多看到的  -->
<!--      <DDialog ref="dialogRef" @req="req" :doctorId="doctorId"></DDialog>-->
      <DDialog ref="dialogRef" @req="req" ></DDialog>


    </div>
</template>

<script setup lang="ts">
import {ref, reactive,onMounted,nextTick} from "vue";
import {reqDoctor,deleteDoctorInfo,detailDoctorInfo} from '@/api/care'
import {reqDept} from '@/api/dept'
import DDialog from './doctorAddOrUpdate/index.vue';
// 引入消息提示弹框
import { ElMessage, ElMessageBox } from 'element-plus'


let dialogRef = ref()

// 添加按钮 打开对话框
const open = ()=>{
  nextTick(()=>{   // 保证页面渲染完毕之后在展示新增对话框
    dialogRef.value.init()
    /* value 是响应式 ref 的特性，用于访问或修改 ref 所持有的值。在这个例子中，
       ref 持有的是 DDialog 组件的实例，所以 .value 就是用来访问这个实例的。
    */
  })
}


// 修改按钮打开对话框
const updateOpen = (scope)=>{
  // console.log(scope)   // scpoe 里面的target里收集了这一行的所有数据
  nextTick(()=>{   //z 保证页面渲染完毕之后在展示新增对话框
    dialogRef.value.init(scope.row.id)
  })
}

const tableData = ref([]);

let doctorForm = reactive({
  "name": null,         // 姓名字段
  "deptId": null,              // 部门id
  "degree": null,       // 学历
  "job": null,          // 职务
  "recommended": null,      // 优先级
  "status": 1,            // 在职状态  1 在职  2 离职  3 退休
  "order": "ASC",        // 排序
  "page": 1,                // 当前页码
  "length": 10               // 每页的条数
})

let total = ref(0);



// 请求查询接口调用以及赋值
const req = async () => {
  let res = await reqDoctor(doctorForm);
  // console.log(res);
  tableData.value = res.result.list;
  total = res.result.totalCount;
};

let allDept = ref([]);

onMounted(async () => {
  // 请求所有科室
  let res = await reqDept();
  // console.log(res);  // 查看所有科室的信息
  allDept.value = res.result
  // 调用请求医生信息
  req();
});


// 当前每页展示条数的切换
const handleSizeChange = (val) => {
  doctorForm.length = val;
  req();
};

// 当前页码的切换
const handleCurrentChange = (val) => {
  // console.log(val);   // 打印的是当前点击的页码
  doctorForm.page = val;
  req()
};

// 删除一条医生信息
const deleteOne = (scope)=>{
  ElMessageBox.confirm(
      '确认要删除此条信息吗?',
      '提示框',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        // 当点击确认按钮时 执行的回调函数

        let res = await deleteDoctorInfo({ids: [scope.row.id]})
        console.log(res);
        // 删除成功 重新渲染 table 数据
        if (res.code == 200) {
          req();
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        }

      })
      .catch(() => {
        // 当点击取消按钮时 执行的回调函数
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      });
}


// 所有医生信息数组
let doctorInfoArr = ref([])
// 选中状态改变的事件函数 获取所有的医生信息
const handleSelectionChange =(val)=>{
  console.log(val);  //  选项改变时 val 的值也跟着改变
  doctorInfoArr.value = val
}

// 删除选中的医生信息  （批量删除功能）
const delChose= ()=>{
  ElMessageBox.confirm(
      '确认要删除选中的信息吗?',
      '提示框',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        let ids = [];
        doctorInfoArr.value.forEach(item=>{
          ids.push(item.id)
        })
        // 如果没有选中的一医生 取消删除
        if (ids.length == 0) {
          ElMessage({
            type: 'warning',
            message: '请选择要删除的医生',
            duration:1200
          })
          return
        }
        // 当点击确认按钮时 执行的回调函数

        let res = await deleteDoctorInfo({ids:ids});
        console.log(res);
        // 删除成功 重新渲染 table 数据
        if (res.code == 200) {
          req();
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        }

      })
      .catch(() => {
        // 当点击取消按钮时 执行的回调函数
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      });
}



// 控制展开行的数组
let expands = ref([])

let doctorDetail = ref({});

// 图片上传的请求地址
let action = import.meta.env.VITE_APP_BASE_API + `/doctor/updatePhoto`
// 图片上传请求头携带的token
let token = localStorage.getItem('token')

// 图片上传成功后的回调函数
const updatePhotoSuccess = () => {
  // 修改图片成功后 url 也要有随即值
  doctorDetail.value.photo = import.meta.env.VITE_DOCTOR_PIC_API + `/doctor/doctor-${doctorDetail.value.id}.jpg?${Math.random()}`
};


// 展开行或关闭展开行时触发的事件
// row 当前展开行的表单对象
// expandedRows 所有展开行的表单对象
const expandChange =async (row, expandedRows) => {
  console.log(row)
  console.log(expandedRows)
  // 控制 expands 展开行数组长度为一
  if (expandedRows.length > 0) {
    // 控制只展开一行
    expands.value = [];
    // 通过每行key值（id）展开当前行
    expands.value.push(row.id)

    // 获取医生详情接口
    let res = await detailDoctorInfo({id: row.id});
    console.log(res)
    doctorDetail.value = res.doctor;
    // 在医生详情对象中 提娜佳一个id属性 保存当前展开行的医生id值
    doctorDetail.value.id = row.id
    // 每次修改的时候 图片地址都发生变化 重新请求图片
    doctorDetail.value.photo = import.meta.env.VITE_DOCTOR_PIC_API + res.doctor.photo + `?${Math.random()}`
  } else {
    expands.value = [];

  }

};






</script>

<style lang="scss" scoped>
   /* .input{
      width: 160px;
    }
    .el-form-item{
      margin-right: 15px;
    }*/

    .table_update{
      margin-right: 10px;
    }
    .doctor_page{
      margin-top: 20px;
    }
    .content {
      border: 1px solid #45B9F0;
      border-collapse: collapse; //相邻的表格共享边框
      margin: 20px 30px;
      th {
        padding: 10px 20px;
        border: 1px solid #45B9F0;
        background-color: #d3edfa;
        color: #45B9F0;
      }
      td {
        padding: 10px 20px;
        border: 1px solid #45B9F0;
        line-height: 1.7;  // 字体大小的1.7倍
      }
      .image-slot {
        font-size: 75px;
        color: #45B9F0;
      }
    }
</style>